<template>
  <div class="app-container">
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />
    <div class="filter-container">
      <span class="filter-title filter-item"
        >身份</span
      >
      <k-select
        v-model="listQuery.roleId"
        class="filter-item right-item"
        style="width: 120px"
        :select-params="[
         { label: '玩家', value: 2 },
            { label: '主播', value: 3 },
        ]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item"
        >玩法</span
      >
      <k-select
        v-model="listQuery.playType"
        class="filter-item right-item"
        style="width: 120px"
        keyIndex="1"
        :select-params="[
          {
            label: '心跳时刻',
            value: '1',
          },
          {
            label: '欧皇战场',
            value: '10',
          },
          {
            label: '晶粹商城',
            value: '8',
          },
        ]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">创建时间</span>
      <k-date-picker
        v-model="timeValue"
        valueFormat="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        class="filter-item right-item"
        @hqchang="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item"
        >货币类型</span
      >
      <k-select
        v-model="listQuery.consumeType"
        class="filter-item right-item"
        style="width: 120px"
        :select-params="[
          {
            label: '积分',
            value: '1',
          },
          {
            label: '晶粹',
            value: '2',
          },
        ]"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
   
    </div>

    <k-button
      v-if="authorityHandle(462)"
      class="top-btn"
      value="前十奖品设置"
      @click.native="TopTenPrizeSettings"
    />
    <!-- <k-button v-if="authorityHandle(7)" class="top-btn" value="次日结算设置" @click.native="NextDayPrizeSettings" /> -->
    <!--表格相关 -->
    <el-table
      :data="listData"
      border
      fit
      :summary-method="getSummaries"
      show-summary
      highlight-current-row
      @sort-change="sortChange"

      style="width: 100%; border-radius: 8px; margin-top: 30px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column
        min-width="60px"
        type="index"
        label="序号"
        align="center"
      />
      <el-table-column
        prop="userMobile"
        min-width="100px"
        label="用户名"
        align="center"
      />
      <el-table-column
        prop="userRole"
        min-width="100px"
        label="身份"
        align="center"
      >
        <template slot-scope="scope">
          {{ getUserType(scope.row.userRole) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="consumeAmount"
        min-width="100px"
        label="消耗数"
        align="center"
      />
      <el-table-column
        min-width="100px"
        label="货币类型"
        align="center"
      >
      <template slot-scope="scope">
          {{ getConsumeType(scope.row.consumeType) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="playType"
        min-width="100px"
        label="玩法"
        align="center"
      >
      <template slot-scope="scope">
          {{ getPlayType(scope.row.playType) }}
        </template>
    </el-table-column>
      <el-table-column
        prop="playName"
        min-width="100px"
        label="名称"
        align="center"
      />
      <el-table-column
        prop="playAwardName"
        min-width="100px"
        label="所得名称"
        align="center"
      />
      <el-table-column
        sortable
        prop="playAwardPrice"
        min-width="100px"
        label="所得价值(J)"
        align="center"
      />
      <el-table-column
        prop="dataDate"
        min-width="100px"
        label="创建时间"
        align="center"
      />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 前十奖品 弹窗 -->
    <k-dialog
      :show-hide.sync="topTen.dialogShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="前十奖品设置"
      class-name="openboxsetting-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="topTenBtn"
    >
      <div class="dialog-openboxsetting">
        <el-form :model="topTen" class="demo-form-inline">
          <el-form-item label="前十奖品设置">
            <el-switch
              v-model="topTen.status"
              active-color="#3b425d"
              inactive-color="#E9EBF2"
              active-text="开"
              inactive-text="关"
            >
            </el-switch>
          </el-form-item>
          <div style="display: flex;">
            <el-form-item label="1." style="width: 170px;">
              <el-input v-model="topTen.oneAmount" style="width: 100px;" placeholder="请输入"></el-input>（积分）
            </el-form-item>
          <el-form-item label="2."  style="width: 170px;">
            <el-input v-model="topTen.twoAmount" style="width: 100px;" placeholder="请输入"></el-input>（积分）
          </el-form-item>
          <el-form-item label="3."  style="width: 170px;">
            <el-input v-model="topTen.threeAmount" style="width: 100px;" placeholder="请输入"></el-input>（积分）
          </el-form-item>
          <el-form-item label="4."  style="width: 170px;">
            <el-input v-model="topTen.fourAmount" style="width: 100px;" placeholder="请输入"></el-input>（积分）
          </el-form-item>
          <el-form-item label="5."  style="width: 170px;">
            <el-input v-model="topTen.fiveAmount" style="width: 100px;" placeholder="请输入"></el-input>（积分）
          </el-form-item>
          </div>
  
          <div style="display: flex;">
          <el-form-item label="6."  style="width: 170px;">
            <el-input v-model="topTen.sixAmount" style="width: 100px;" placeholder="请输入"></el-input>（积分）
          </el-form-item>
          <el-form-item label="7."  style="width: 170px;">
            <el-input v-model="topTen.sevenAmount" style="width: 100px;" placeholder="请输入"></el-input>（积分）
          </el-form-item>
          <el-form-item label="8."  style="width: 170px;">
            <el-input v-model="topTen.eightAmount" style="width: 100px;" placeholder="请输入"></el-input>（积分）
          </el-form-item>
          <el-form-item label="9."  style="width: 170px;">
            <el-input v-model="topTen.nineAmount" style="width: 100px;" placeholder="请输入"></el-input>（积分）
          </el-form-item>
          <el-form-item label="10."  style="width: 170px;">
            <el-input v-model="topTen.tenAmount" style="width: 100px;" placeholder="请输入"></el-input>（积分）
          </el-form-item>
        </div>
        </el-form>
      </div>
    </k-dialog>
    <!-- 次日结算 弹窗 -->
    <k-dialog
      :show-hide.sync="nextDay.dialogShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="次日结算"
      class-name="openboxsetting-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="nextDayBtn"
    >
      <div>
        <div
          class="dialog-openboxsetting"
          style="display: flex; justify-content: center"
        >
          <span style="display: flex; align-items: center">总流水*</span>
          <el-input
            v-model="topTen.input"
            placeholder="请输入"
            style="width: 100px"
          ></el-input
          ><span style="display: flex; align-items: center">%</span>
        </div>
        <div style="text-align: center; margin-top: 10px">自动进入余额</div>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { listUserConsume ,getConsumeAward,setConsumeAward} from "@/api/avatar";
import hqSearchDown from "@/components/hqSearchDown"; // 下拉搜索

export default {
  name: "Extension",
  components: { Pagination ,hqSearchDown},
  dicts: ["IDENTITY_TYPE"],
  data() {
    return {
           // 下拉搜索项0
           selectOpts: [
            {
              label: '盲盒搜索',
              value: 'playName'
            },
             {
              label: '用户名搜索',
              value: 'key'
            }
          ],
      timeValue: "",
      listData: [],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: "",
        },
        sort: "", // 排序字段 为对应列名,
        direction: "", // 排序 正向(asc)逆向(desc),
        key: "", // 名称'
        roleId: "", // 身份',
        playType: "", // 玩法
        playName: "", // 玩法
        consumeType: "", // 货币类型
        startTime: "", // 最终创建时间",
        endTime: "", // 最早支付时间",
      },
      topTen: {
        dialogShow: false,
        status: false,
        oneAmount: "",
        twoAmount:'',
        threeAmount:'',
        fourAmount:"",
        fiveAmount:"",
        sixAmount:"",
        sevenAmount:"",
        eightAmount:"",
        nineAmount:"",
        tenAmount:""
      },

      jewelryValue: "", // 饰品价值
      nextDay: {
        dialogShow: false,
        input: "",
      },
      consumeAmount:"",
      playAwardPrice:''
    };
  },
  watch: {
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null;
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null;
    },
  },

  created() {
    this.loadData();
  },
  methods: {
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop;
      if (column.order === "ascending") {
        this.listQuery.direction = "asc";
      } else if (column.order === "descending") {
        this.listQuery.direction = "desc";
      }
      this.loadData();
    },
    // 前十奖品设置
    async TopTenPrizeSettings() {
      const res = await getConsumeAward()
      if(res.status == 200){
        this.topTen = {
        dialogShow: true,
        ...res.data
      }
    }
    },
    async topTenBtn() {
      const res = await setConsumeAward(this.topTen)
      if(res.status == 200){
        this.$message.success('保存成功');
        this.topTen.dialogShow = false;
      }
   console.log();
    },
    // 获取饰品价值
    changeRegion(ele, item) {
      item.jewelryValue = ele.price;
    },
    // 次日结算设置
    NextDayPrizeSettings() {
      this.nextDay.dialogShow = true;
    },
    nextDayBtn() {},
    /**
     * 合计
     * @param {obj} param
     */
    getSummaries(param) {
      const { columns } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          // 第一列
          sums[index] = "总计";
        } else if (column.property == "playAwardPrice") {
          sums[index] = this.playAwardPrice
        } else if (column.property == "consumeAmount") {
          sums[index] = this.consumeAmount 
        }
      });
      return sums;
    },
    // 查看详情
    clickDetail() {
      this.$router.push({
        path: "/rootplayrules/promotion-settlement-details",
      });
    },
    getUserType(userType) {
      let s = "";
      switch (userType) {
        case 2:
          s = "玩家";
          break;
        case 3:
          s = "主播";
          break;
      }
      return s;
    },
    getConsumeType(consumeType){
      let s = "";
      switch (consumeType) {
        case 1:
          s = "积分";
          break;
        case 2:
          s = "晶粹";
          break;
      }
      return s;
    },
    getPlayType(playType){
      console.log(playType);
      let s = "";
      switch (playType) {
        case 1:
          s = "心跳时刻";
          break;
        case 8:
          s = "晶粹商城";
          break;
        case 10:
         s = "战场获得";
        break;
      }
      return s;
    },
    loadData() {
      listUserConsume({ ...this.listQuery }).then((res) => {
        const data = res.data;
        this.listData = data.rows;
        this.totalRows = data.totalRows;
        this.consumeAmount = data.totalData.consumeAmount
        this.playAwardPrice = data.totalData.playAwardPrice
      });
    },
    // 搜索查询事件
    handleFilter(v, type) {
      this.listQuery.key = v.key
      this.listQuery.playName= v.playName
      console.log(v);
      if (type !== 1) this.listQuery.pager.pageNo = 1;
      this.loadData();
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .right-item {
    margin-right: 10px;
  }
  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162e;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}
</style>
